<template>
  <div id="app">
    <ul class="nav">
      <li>
        <router-link to="/home">手机端</router-link>
      </li>
      <li>
        <router-link to="/web">pc端</router-link>
      </li>
      <li>
        <router-link to="/life">生活往事</router-link>
      </li>
    </ul>
    <!-- <transition :name="'vux-pop-' + (direction === 'left' ? 'in' : 'out')"> -->
    <router-view class="router-view"></router-view>
    <!-- </transition> -->
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      direction: "right",
    };
  },
  watch: {
    // 跳转动画控制
    $route(to, from, next) {
      // 如果isBack为true时，证明是用户点击了回退，执行right动画
      let isBack = this.$router.isBack;
      if (isBack) {
        this.direction = "right";
      } else {
        this.direction = "left";
      }
      // 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退
      this.$router.isBack = false;
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* background: #eae3d5; */
  /* margin-top: 60px; */
}
body {
  /* overflow: hidden; */
}
/* html {
  font-size: 12px;
} */
.nav {
  position: fixed;
  top: 0px;
  left: 0px;
  color: #fff;
  cursor: pointer;
  z-index: 11;
  display: flex;
  width: 50%;
  background: #000;
  margin: 0;
  height: 80px;
  line-height: 80px;
  width: 100%;
  padding: 0;
}
.nav a {
  color: #fff;
}
.nav li {
  list-style: none;
  padding-left: 4rem;
  padding-right: 2rem;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 300ms;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
li {
  list-style: none;
}
.hljs {
  line-height: 1.8;
  font-family: Menlo, Monaco, Consolas, Courier, monospace;
  font-size: 12px;
  padding: 18px 24px;
  background-color: #fafafa;
  border: 1px solid #eaeefb;
  border-radius: 4px;
  -webkit-font-smoothing: auto;
  display: block;
}
code {
    line-height: 1.8;
  font-family: Menlo, Monaco, Consolas, Courier, monospace;
  font-size: 12px;
  padding: 0 0 10px 0;
  background-color: #fafafa;
  border: 1px solid #eaeefb;
  border-radius: 4px;
  -webkit-font-smoothing: auto;
  display: block;
}
::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 1);
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /* -webkit-box-shadow: inset 0 0 100px rgba(245, 231, 231, 0.055); */
  background-color: #eae6e6;
}
.d-flex {
  display: flex !important;
}
.right_component {
  display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
</style>

